@import "../../config";

// 主页搜索
.home-search {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  transition: $defaultTransition;
  opacity: 0;
  z-index: -1;

  // 显示
  &.show {
    opacity: 1;
    z-index: 10;
  }

  // 搜索框
  input {
    padding: 12px 46px 12px 14px;
    width: 200px;
    border-radius: 60px;
    font-size: $fontNormal;
    line-height: 20px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: $defaultBoxShadow;
    transition: all 0.25s;

    // 占位符
    &::placeholder {
      color: #ffffff;
      transition: all 0.25s;
    }

    &:hover {
      width: 500px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.6);
      box-shadow: $defaultBoxShadowHover;

      &::placeholder {
        color: #666666;
      }
    }

    &:focus {
      width: 500px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: $defaultBoxShadow;

      // focus 状态的占位符
      &::placeholder {
        color: transparent;
      }
    }
  }
}
